import React from 'react';

export default class BackgroundSettingList extends React.Component {
  constructor(props) {
    super(props)
  }

  onDeleteClick(data) {
    if (confirm("确认要删除该账号吗?")) {
      this.props.onDeleteClick(data)
    }
  }

  renderList() {
    var self = this;
    var content = [];
    if (this.props.data && this.props.data.length > 0) {
      this.props.data.forEach(function(data, index) {
        var sysuser = data;
        var role = "";
        if (sysuser.sys_role_user && sysuser.sys_role_user.length > 0) {
          for (var i = 0; i < sysuser.sys_role_user.length; i++) {
            var roleUser = sysuser.sys_role_user[i];
            if (roleUser.role) {
              role += roleUser.role.name+" "
            }
          }
        }
        content.push((
          <tr>
            <td>
              {sysuser.username}
            </td>
            <td>
              {sysuser.firstName+" "+sysuser.lastName}
            </td>
            <td>
              {sysuser.mobile}
            </td>
            <td>
              {sysuser.email}
            </td>
            {
              // <td>
              //   {role}
              // </td>
            }

            <td>
              <a onClick={(event)=>self.props.onEditClick(data)}>基本信息</a>
              <a className="edit f-dn" onClick={(event)=>self.props.onRoleEditClick(data)}>角色修改</a>
              {sysuser.username=='su'?false: <a className="delete" onClick={(event)=>self.onDeleteClick(data)}>删除</a>}
            </td>
          </tr>
        ))
      })
    }

    return content
  }

  render() {
    return(
      <div className="Background-setting-list setting-list">
        <table className="table">
          <thead>
            <tr className="table-title">
              <th>管理员</th>
              <th>姓名</th>
              <th>手机号</th>
              <th>邮箱</th>
              <th className='f-dn'>角色名</th>
              <th>编辑</th>
            </tr>
          </thead>
          <tbody>
            {this.renderList()}
          </tbody>
        </table>
      </div>
    )
  }
}
